<route lang="jsonc" type="home">
{
  "layout": "default",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "登录",
  },
}
</route>

<template>
  <wd-navbar
    left-text=""
    right-text="注册"
    left-arrow
    @click-left="handleClickLeft"
    @click-right="handleClickRight"
    class="mt-2"
  ></wd-navbar>

  <view class="title-container">
    <view class="title" :class="{ reversed: !isPasswordLogin }">
      <!-- 密码登录选项 -->
      <view
        class="tab-item"
        :class="isPasswordLogin ? 'active' : 'iphone'"
        @click="isPasswordLogin = true"
      >
        密码登录
      </view>

      <!-- 手机验证码登录选项 -->
      <view
        class="tab-item"
        :class="!isPasswordLogin ? 'active' : 'iphone'"
        @click="isPasswordLogin = false"
      >
        手机验证码登录
      </view>
    </view>
  </view>

  <wd-form ref="form" :model="model" class="mt-5" v-if="isPasswordLogin">
    <wd-cell-group border class="pl-5 pr-5">
      <wd-input
        label-width="100px"
        prop="value1"
        clearable
        v-model="model.value1"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <wd-input
        label-width="100px"
        prop="value2"
        show-password
        clearable
        v-model="model.value2"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
        class="mt-2"
      />
    </wd-cell-group>
    <wd-checkbox v-model="value" checked-color="#16C2A3" class="pl-5 mt-4">
      <span>
        我已同意 <text class="text-green-500">用户协议</text> 及
        <text class="text-green-500">隐私协议</text>
      </span>
    </wd-checkbox>
    <view class="footer">
      <wd-button
        type="success"
        size="large"
        @click="handleSubmit"
        block
        class="mt-1"
        >登录</wd-button
      >
      <p class="fs-10 text-center mt-3">忘记密码?</p>
    </view>
  </wd-form>

  <wd-form ref="form" :model="model" class="mt-5" v-else>
    <wd-cell-group border class="pl-5 pr-5">
      <wd-input
        label-width="100px"
        prop="value1"
        clearable
        v-model="model.value1"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <view style="display: flex">
        <wd-input
          label-width="100px"
          prop="value2"
          clearable
          v-model="model.value2"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
          class="mt-2"
        />
        <span
          class="text-center pt-5 ml-3"
          style="color: #16c2a3; font-size: 15px; cursor: pointer"
          @click="handleGetCode"
          :style="{
            color: countDown > 0 ? '#ccc' : '#16c2a3',
            cursor: countDown > 0 ? 'not-allowed' : 'pointer',
          }"
        >
          {{ countDown > 0 ? `${countDown}s后重新获取` : "获取验证码" }}
        </span>
      </view>
    </wd-cell-group>
    <wd-checkbox v-model="value" checked-color="#16C2A3" class="pl-5 mt-4">
      <span>
        我已同意 <text class="text-green-500">用户协议</text> 及
        <text class="text-green-500">隐私协议</text>
      </span>
    </wd-checkbox>
    <view class="footer">
      <wd-button
        type="success"
        size="large"
        @click="handleSubmit"
        block
        class="mt-1"
        >登录</wd-button
      >
      <p class="fs-10 text-center mt-3">忘记密码?</p>
    </view>
  </wd-form>

  <view class="mt-50">
    <wd-divider content-position="center">第三方登录</wd-divider>
    <img src="@/static/app/icons/QQ.svg" alt="" class="w-10 h-10 ml-42" />
  </view>
</template>

<script lang="ts" setup>
import { useToast } from "wot-design-uni";
import WdDivider from "wot-design-uni/components/wd-divider/wd-divider.vue";
import { reactive, ref } from "vue";
import { login } from "@/api/login";
import { getCode, codeLogin } from "@/api/login";

// 顶部导航点击事件

function handleClickRight() {
  uni.navigateTo({
    url: "./register",
  });
}
function handleClickLeft() {
  uni.navigateBack({
    delta: 1,
  });
}

// 切换登录方式
const isPasswordLogin = ref(true);

// 表单校验
const { success: showSuccess } = useToast();

const model = reactive<{
  value1: string;
  value2: string;
}>({
  value1: "",
  value2: "",
});
const form = ref();

async function handleSubmit() {
  if (isPasswordLogin.value) {
    await login({
      mobile: model.value1,
      password: model.value2,
    }).then((res) => {
      console.log(res, 111);
      localStorage.setItem("token", res.data.token);
      uni.switchTab({
        url: "/pages/index/index",
      });
    });
  } else {
    await codeLogin({
      mobile: model.value1,
      code: model.value2,
    }).then((res) => {
      console.log(res, 111);
      localStorage.setItem("token", res.data.token);
      uni.switchTab({
        url: "/pages/index/index",
      });
    });
  }
}

// 复选框
const value = ref<boolean>(true);

// 获取验证码倒计时
const countDown = ref(0);
const timer = ref(null);

// 四位数验证码
const generateVerificationCode = () => {
  const code = Math.floor(1000 + Math.random() * 9000);
  return code.toString();
};

// 处理获取验证码
const handleGetCode = async () => {
  // 如果正在倒计时，则不执行
  if (countDown.value > 0) return;

  // 生成并输出验证码到控制台
  const verificationCode = generateVerificationCode();
  // console.log("验证码：", verificationCode);
  await getCode({
    mobile: model.value1,
    type: "login",
  }).then((res) => {
    console.log(res);
  });

  // 设置倒计时时间（60秒）
  countDown.value = 60;

  // 启动倒计时
  timer.value = setInterval(() => {
    countDown.value--;
    // 倒计时结束
    if (countDown.value <= 0) {
      clearInterval(timer.value);
      timer.value = null;
    }
  }, 1000);
};

// 组件卸载时清除定时器，防止内存泄漏
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<style>
.title {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
}
.active {
  font-size: 22px;
  font-weight: bold;
}
.iphone {
  margin-top: 7px;
}
.footer {
  padding: 12px;
}
p {
  color: #848484;
}

.title-container {
  margin: 20px;
}

.title {
  display: flex;
  gap: 20px;
}

/* 反转顺序的类 */
.title.reversed {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  color: #666;
  user-select: none;
}

.tab-item.active {
  color: #2c3e50;
  font-weight: 600;
}

.tab-item:hover:not(.active) {
  border-bottom-color: #ecf0f1;
}
</style>
